การใช งานเคร องม อ JCE Editor

Transcription

1 การใช งานเคร องม อ JCE Editor การท างานของป มเคร องม อต างๆ จะเหม อนก บการใช งานเคร องม อใน Microsoft word เวลาใช งาน สามารถเอาเมาส ไปช ท Icon เคร องม อน นๆ ด ได ว า Icon แต ละต วม ความหมายและใช ท าอะไร Name / Description New document สร างเอกสารใหม ซ งจะลบข อม ลท งหมดท เรากรอกไปแล ว ออกท งหมด Copy, Cut, Paste ส าเนาข อความหร อร ปภาพ, ต ดข อความหร อร ปภาพพร อม ส าเนาด วย, วางข อความหร อร ปภาพท เราได copy มาก อน น Select text color เล อกส หร อ เปล ยนส ให ต วอ กษร Bold (Ctrl+B) ท าต วหนาให ต วอ กษร Italic (Ctrl+I) ท าต วเอ ยงให ต วอ กษร Underline (Ctrl+U) ข ดเส นใต ให ต วอ กษร Font family ร ปแบบต วอ กษร Font size ขนาดต วอ กษร Align full, Align center, Align left, Align right ใช ส าหร บจ ดวางต าแหน งวางต วอ กษร หร อ ร ปภาพ Insert horizontal ruler ข ดเส น Insert/Edit image : เพ มหร อแก ไขร ปภาพ Insert/Edit link : เพ มหร อแก ไข link Unlink : เอา link ออก Undo Icon

2 Redo เคร องม อเก ยวก บการจ ดการตาราง Insert a new table : สร างตารางใหม Delete table : ลบตาราง Remove column, Delete row ลบแถวแนวต ง, ลบแถวแนวนอน Insert column after, Insert column before เพ มแถวในแนวต งหล งเคอร เซอร และเพ มแถวในแนวต งก อน เคอร เซอร Insert row after, Insert row before เพ มแถวในแนวนอน Merge table cells รวมแถวในแนวนอน หร อในแนวต ง Split merged table cells แยกแถวในแนวต ง หร อแนวนอน ก อนท จะใช งานเคร องม อน น ในบางคร งต องท าแถบด าคล มพ นท ในส วนท จะใช งานก อนเช น การ Merge แถวแนวต งหร อ แถวแนวนอน การเปล ยนส ต วหน งส อ การท า link การ copy ฯลฯ โดยเคร องม อ ส วนใหญ จะม การใช งานเหม อนใน Microsoft Word 1. การใช งานเคร องม อส าหร บสร างตาราง คล กบนพ นท ว างๆ ให ม เคอร เซอร ข นก อน แล วคล กท เคร องม อ Inserts a new table ด งร ปท 1.1 เพ อท า การสร างตาราง ร ปท 1.1 การใช งานเคร องม อ Inserts a new table

3 เม อท าคล กท เคร องม อ Inserts a new table แล ว จะแสดงหน าต างด งร ปท 1.2 เพ อต งค าให ก บ ตาราง เช นความส ง ความกว างของตาราง Cols หมายถ ง ก าหนดจ านวนแถวตามแนวต ง Rows หมายถ ง การก าหนดจ านวนแถวตามแนวนอน Alignment หมายถ ง การต งค าต าแหน งตาราง เช นให ช ดด านซ าย ด านขวา หร อตรงการ Border หมายถ ง ก าหนดความหน าของขอบตาราง เลข 0 หมายถ ง ไม ต องการให ม เส นขอบ Width หมายถ ง การก าหนดขนาดความกว างของตาราง Height หมายถ ง การก าหนดความส งของตาราง เม อผ ใช งานก าหนดค าต างๆ เสร จแล ว ให คล กท ป ม Insert ด งร ปท 1.2 และจะได ผลล พธ ด งร ปท 1.3 ร ปท 1.2 การก าหนดค าให ก บตาราง ร ปท 1.3 แสดงตารางท สร างข น

4 2. การเพ มแถวตามแนวนอน หร อแถวตามแนวต ง ให คล กในแถวหร อคอล มน ท จะท าการเพ ม แล วคล กท ป ม Insert row หร อ Insert columm ซ งจะม อย 2 แบบค อ เพ มก อนหร อหล งบร เวณท เคอร เซอร กระพร บอย ด งร ปท 2.1 จะท าการเพ มแถว แนวนอน หล งแถวท ม เคอร เซอร วางอย ซ งจะได ผลล พธ ด งร ปท 2.2 ร ปท 2.1 การเพ มแถวตามแนวนอน หร อตามแนวต ง ม แถวเพ มข นมา 1 แถว ร ปท 2.2 ผลล พธ จากการเพ มแถวตามแนวนอน

5 3. การใช เคร องม อในการ Merge แถว ให ท าการแดรกเมาส คล มพ นท ท จะท าการ Merge (ล กษณะการท างานเหม อนใน Microsoft word) แล วคล กท ป ม Merge table cells ด งร ปท 3.1 และจะได ผลล พธ ด งร ปท 3.2 ร ปท 3.1 แสดงการท าแดรกเมาส คล มพ นท ท ต องการท าการ Merge ผลล พธ ท ได จากการ Merge แถว ร ปท 3.2 ผลล พธ เม อท าการ Merge แถวแนวนอน

6 4. การใช เคร องม อเพ ม หร อแก ไขร ปภาพ ให คล กตรงต าแหน งท ต องการเพ มร ปภาพก อน แล วคล กเล อกเคร องม อ Insert/Edit image ด งร ปท 4.1 แล วจะได ผลล พธ ด งร ปท 4.2 แสดงเคร องม อ Image Manager เพ อจะเล อกต าแหน งท เก บร ปภาพ หร อ ต าแหน งท จะน าร ปภาพจากเคร องคอมพ วเตอร ไปเก บไว ร ปท 4.1 การใช งานเคร องม อ Insert/Edit image ร ปท ม อย แล วในเคร อง Server ท เก บเว บไซต ร ปท 4.2 หน าต าง Image Manager จากร ปท 4.2 หน าต าง Image Manager น จะแสดงต าแหน งท เก บร ปภาพ ซ งผ ใช งานสามารถเล อก ร ปภาพท เคย Upload มาไว ในเคร อง server แล วข นมาใช งานได หร อ สามารถท จะท าการ Upload ร ปจาก เคร องคอมพ วเตอร ของเราเองไปไว ในเคร อง Server ท ใช เก บเว บไซต ก ได แต ในท น จะอธ บายว ธ การ Upload ร ปภาพจากเคร องคอมพ วเตอร ของเราข นไปเก บในเคร อง Server ท เก บข อม ลเว บไซต ก อน แล วจ งเร ยกร ปด งกล าว ข นมาใช งาน

7 เม อแสดงหน าต างด งร ปท 4.2 แล ว ให คล กเล อก Directory (Folder) ท จะใช เก บภาพ ด งร ปท 4.3 จะเล อก เก บร ปใน Directory ช อว า ja โดยคล กท engfood ---> ja 2.คล กป ม Upload 1.เล อก Directory ท จะ เก บไฟล ร ปภาพ ร ปท 4.3 เล อกต าแหน ง Directory ท ต องการใช เก บไฟล ร ปภาพ จากร ปท 4.3 เม อเล อก Directory ท ต องการเก บร ปภาพ เสร จแล วให คล กท ป ม Upload หล งจากน นจะแสดง หน าต าง Upload ด งร ปท 4.4 ร ปท 4.4 แสดงหน าต าง Upload เพ อท าการเล อกภาพจากเคร องคอมพ วเตอร ของเรา

8 จากร ปท 4.4 ให คล กท ป ม Add หล งจากน นจะแสดงหน าต างข นมา เพ อให เราไปเล อกไฟล ร ปภาพ จากเคร องคอมพ วเตอร ของเราเอง ให ท าการเล อกร ปภาพท เราจะน ามาใช งาน แล วคล กป ม Open ด งร ปท 4.5 ร ปท 4.5 แสดงหน าต างเพ อส าหร บเล อกร ปภาพจากเคร องคอมพ วเตอร ของเราเอง จากร ปท 4.5 เม อคล กท ป ม Open แล วจะกล บมาย งหน าต าง Upload ซ งจะเห นว าม ไฟล ภาพท เรา เล อกแนบต ดมาด วย และจะเห นกากบาทส แดง ซ งหมายถ งย งไม ได ม การ Upload ร ปภาพข นไปเก บใน Directory ท เล อกไว ด งน นให คล กท ป ม Upload ด งร ปท 4.6 จะท าให ได ผลล พธ ด งร ปท 4.7 โดยท กากบาทส แดงจะเปล ยนเป นส เข ยว แสดงว าได ม การอ พโหลดร ปข นไปเก บใน Directory แล ว หล งจากน นให ท าการป ด หน าต างโดยคล กท ป ม Close หร อ กากบาทด านม มขวาของหน าต าง สถานะเป นส แดง คล กเพ ออ พโหลดร ปท เล อกข นเก บ ใน Directory ท เล อกไว ร ปท 4.6 ผลล พธ เม อท าการเล อกจากเคร องคอมพ วเตอร ของเราเอง

9 สถานะเปล ยนเป นส เข ยว ร ปท 4.7 เม อคล กป ม Upload แล ว จากร ปท 4.7 เม อท าการคล กท ป ม Upload แล ว ร ปท ได เล อกไว จะเก บไปใน Directory ท เล อกไว ก อนน และสถานะของป มส แดงจะเปล ยนเป นส เข ยว ถ าต องการเล อกร ปภาพจากเคร องคอมพ วเตอร ของเราอ ก ก ให ท าเช นเด มโดยคล กท ป ม Add และ เล อกร ปภาพ แต เม อไม ต องการท าข นตอนน แล วให คล กท ป ม Close ซ งจะท าให หน าต าง Upload น นถ กป ด ไป และได ผลด งร ปท 4.8 จะเห นว าม ร ปท ถ กอ พโหลดมาเก บไว ใน Directory ท เราเล อกไว แล ว 1. เล อกร ป 2. คล กป ม Insert ร ปท 4.8 แสดงให เห นไฟล ภาพท ได Upload มาเก บใน Directory ท เล อกไว

10 จากร ปท 4.8 ให คล กท ช อไฟล ภาพ เพ อจะน าภาพน ไปประกอบหน าเว บของเรา หล งจากน นให คล กท ป ม Insert จะได ผลล พธ ด งร ปท 4.9 ร ปท 4.9 แสดงไฟล ภาพท ได เล อกมาวาง หมายเหต การใช เคร องม อ Editor JCE สามารถหาข อม ลเพ มเต มได ท editor-toolbar และ editor-buttons